.che-number-spinner
  font-size 12px
  // hide spin buttons
  input[type=number] {
    -moz-appearance: textfield;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

.che-number-spinner div[ng-messages]
  color $error-color
  margin-left 10px

.che-number-spinner .spinner-container
  che-border-radius(2px)
  background-color $light-gray-color

  *
    outline none

.che-number-spinner
  &.number-invalid .input-container
    border-color $error-color

  .input-container
    border 1px solid transparent
    box-sizing border-box
    che-border-radius(2px)
    margin 3px
    padding 0
    height 29px
    min-width 1px

    input
      display block
      background-color transparent
      border-color transparent
      box-shadow none
      text-align right
      font-weight 600
      min-width 1px
      max-width 28px

    .unit
      font-weight 600

  .md-button
    che-border-radius(2px)
    border 1px solid $cat-gray-color
    background-color $che-white-color
    height 29px
    width 29px
    min-height 29px
    min-width 29px
    margin 2px

    md-icon
      color #1E8BC3
      text-shadow 0 0 2px alpha($che-medium-blue-color, 0.5);
